<template>
  <div class="index-swiper">
    <swiper class="box" :current="swiperIndex" @change="onSwiperChange" circular autoplay :interval="2000"
      :duration="500">
      <swiper-item v-for="(item, idx) in list" :key="idx">
        <image class="item" :src="item"></image>
      </swiper-item>
    </swiper>
    <cover-view class="dots" v-if="list?.length > 1">
      <cover-view v-for="(_, idx) in list" :class="`${swiperIndex === idx && 'active'} dot`" :key="idx"></cover-view>
    </cover-view>
  </div>
</template>

<script setup>
import { ref } from "vue"
const swiperIndex = ref(0)
function onSwiperChange(ev) {
  swiperIndex.value = ev.detail.current
}
const { list } = defineProps({
  list: Array,
})
</script>

<style lang="less" scoped>
@import url(./index.less);
</style>
